<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload=function(){
            var app4 = new Vue({
                el: '#app-4',

                methods: {
                    addpeople: function () {
                        this.todos.push({name: this.username})

                    },
                    switchdel:function(index){
                        this.todos[index].done=!this.todos[index].done;
                    }


                } ,
                data: {
                    username:"",
                    todos: [
                        { name: '11！！',done:false },
                        { name: '33！！！',done:false },
                        { name: '44！！！',done:true}
                    ]
                }
            });
        }
    </script>
    <style>.del{text-decoration:line-through }</style>
</head>
<body>
<div id="app-4">
    <input type="text" v-model="thing">
    <button v-on:click="addpeople">添加</button>

    <div v-for="(todo,index) in todos">
        <input type="checkbox" v-bind:checked="todo.done" v-on:click="switchdel(index)">
        {{index+1 }}.
            <span v-bind:class="{del:todo.done}">
            {{ todo.name }}</span>
    </div>

    总共{{todos.length}}个事项

</div>
</body>
</html>